<template>
<div>
  <navbar></navbar>
  <div class="wrapper">
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1','2']">
          <el-submenu index="1" v-if="type_id!==1">
            <template slot="title">
              <i class="el-icon-sold-out"></i>
              <span>购买订单</span>
            </template>
            <el-menu-item index="1-1" v-on:click="content_index=1">
              <span class="menu-title">待支付</span>
            </el-menu-item>
            <el-menu-item index="1-2" v-on:click="content_index=2">
              <span class="menu-title">已支付</span>
            </el-menu-item>
            <el-menu-item index="1-3" v-on:click="content_index=3">
              <span class="menu-title">派送中</span>
            </el-menu-item>
            <el-menu-item index="1-4" v-on:click="content_index=4">
              <span class="menu-title">已完成</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="2" v-show="hasStore">
            <template slot="title">
              <i class="el-icon-sell"></i>
              <span>销售订单</span>
            </template>
            <el-menu-item index="2-1" v-on:click="content_index=5">
              <span class="menu-title">未接受</span>
            </el-menu-item>
            <el-menu-item index="2-2" v-on:click="content_index=6">
              <span class="menu-title">待发货</span>
            </el-menu-item>
            <el-menu-item index="2-3" v-on:click="content_index=7">
              <span class="menu-title">已完成</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <div v-if="type_id!==1">
            <div v-show="content_index===1">
              <h1>待支付</h1>
              <el-table :data="orderList.unPaid">
                <el-table-column label="选择">
                  <template slot-scope="scope">
                    <el-checkbox-group v-model="checkList.order.unpaid">
                      <el-checkbox :label="scope.row.sub_order_id"><br></el-checkbox>
                    </el-checkbox-group>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="sub_order_id"
                  label="子订单号"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="item_id"
                  label="商品编号"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="item_price"
                  label="商品单价"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="item_num"
                  label="购买数量"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="total_amount"
                  label="订单总价"
                  width="">
                </el-table-column>
                <el-table-column label="操作" width="400">
                  <template slot-scope="scope">
                    <el-button type="info" @click="getOrderDetail(scope.row.sub_order_id)">详细信息</el-button>
                    <el-button type="primary" @click="payOrder(scope.row.sub_order_id)">支付</el-button>
                    <el-button type="warning" @click="closeOrder(scope.row.sub_order_id)">申请退款</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="footer">
<!--                <el-button type="primary" @click="payOrders()">支付选中订单</el-button>-->
                <el-button type="warning" @click="closeOrders(checkList.order.unpaid)">批量申请退款</el-button>
              </div>
            </div>
            <div v-show="content_index===2">
              <h1>已支付，请耐心等待商家发货</h1>
              <el-table :data="orderList.paid">
                <el-table-column label="选择">
                  <template slot-scope="scope">
                    <el-checkbox-group v-model="checkList.order.paid">
                      <el-checkbox :label="scope.row.sub_order_id"><br></el-checkbox>
                    </el-checkbox-group>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="sub_order_id"
                  label="子订单号"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="item_id"
                  label="商品编号"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="item_price"
                  label="商品单价"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="item_num"
                  label="购买数量"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="total_amount"
                  label="订单总价"
                  width="">
                </el-table-column>
                <el-table-column label="操作" width="400">
                  <template slot-scope="scope">
                    <el-button type="info" @click="getOrderDetail(scope.row.sub_order_id)">详细信息</el-button>
                    <el-button type="primary" @click="$message.success('提醒成功！')">提醒发货</el-button>
                    <el-button type="warning" @click="closeOrder(scope.row.sub_order_id)">申请退款</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="footer">
                <el-button type="warning" @click="closeOrders(checkList.order.paid)">批量申请退款</el-button>
              </div>
            </div>
            <div v-show="content_index===3">
              <h1>派送中</h1>
              <el-table :data="orderList.delivery">
                <el-table-column label="选择">
                  <template slot-scope="scope">
                    <el-checkbox-group v-model="checkList.order.delivery">
                      <el-checkbox :label="scope.row.sub_order_id"><br></el-checkbox>
                    </el-checkbox-group>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="sub_order_id"
                  label="子订单号"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="item_id"
                  label="商品编号"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="item_price"
                  label="商品单价"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="item_num"
                  label="购买数量"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="total_amount"
                  label="订单总价"
                  width="">
                </el-table-column>
                <el-table-column label="操作" width="500">
                  <template slot-scope="scope">
                    <el-button type="info" @click="getOrderDetail(scope.row.sub_order_id)">详细信息</el-button>
                    <el-button @click="$message.info('正在开发中，敬请期待')">查看物流</el-button>
                    <el-button type="success" @click="deliverOrder(scope.row.sub_order_id)">确认收货</el-button>
                    <el-button type="warning" @click="closeOrder(scope.row.sub_order_id)">申请退款</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="footer">
                <el-button type="success" @click="deliverOrders()">批量确认收货</el-button>
                <el-button type="primary" @click="closeOrders(checkList.order.delivery)">批量申请退款</el-button>
              </div>
            </div>
            <div v-show="content_index===4">
              <h1>已完成</h1>
              <el-table :data="orderList.finished">
                <el-table-column
                  prop="sub_order_id"
                  label="子订单号"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="item_id"
                  label="商品编号"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="item_price"
                  label="商品单价"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="item_num"
                  label="购买数量"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="total_amount"
                  label="订单总价"
                  width="">
                </el-table-column>
                <el-table-column label="操作" width="300">
                  <template slot-scope="scope">
                    <el-button type="info" @click="getOrderDetail(scope.row.sub_order_id)">详细信息</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div v-if="type_id!==3&&hasStore">
            <div v-show="content_index===5">
              <h1>待发货</h1>
              <el-table :data="salesList.wait">
                <el-table-column label="选择">
                  <template slot-scope="scope">
                    <el-checkbox-group v-model="checkList.sales.wait">
                      <el-checkbox :label="scope.row.sub_order_id"><br></el-checkbox>
                    </el-checkbox-group>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="sub_order_id"
                  label="子订单号"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="item_id"
                  label="商品编号"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="item_price"
                  label="商品单价"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="item_num"
                  label="购买数量"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="total_amount"
                  label="订单总价"
                  width="">
                </el-table-column>
                <el-table-column label="操作" width="500">
                  <template slot-scope="scope">
                    <el-button type="info" @click="getOrderDetail(scope.row.sub_order_id)">详细信息</el-button>
                    <el-button type="success" @click="acceptOrder(scope.row)">接单</el-button>
                    <el-button type="primary" v-if="type_id===1" @click="modifyNum(scope.row.item_id)">更改库存</el-button>
                    <el-button type="warning" @click="refuseOrder(scope.row.sub_order_id)">拒单</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="footer">
                <el-button type="warning" @click="refuseOrders(checkList.sales.wait)">批量拒单</el-button>
              </div>
            </div>
            <div v-show="content_index===6">
              <h1>已接受</h1>
              <el-table :data="salesList.accepted">
                <el-table-column label="选择">
                  <template slot-scope="scope">
                    <el-checkbox-group v-model="checkList.sales.accepted">
                      <el-checkbox :label="scope.row.sub_order_id"><br></el-checkbox>
                    </el-checkbox-group>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="sub_order_id"
                  label="子订单号"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="item_id"
                  label="商品编号"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="item_price"
                  label="商品单价"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="item_num"
                  label="购买数量"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="total_amount"
                  label="订单总价"
                  width="">
                </el-table-column>
                <el-table-column label="操作" width="300">
                  <template slot-scope="scope">
                    <el-button type="info" @click="getOrderDetail(scope.row.sub_order_id)">详细信息</el-button>
                    <el-button type="success" @click="deleverGood(scope.row.sub_order_id)">发货</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="footer">
                <el-button type="warning" @click="refuseOrders(checkList.sales.accepted)">批量拒单</el-button>

                <!--                <el-button type="success" @click="">批量发货</el-button>-->
              </div>
            </div>
            <div v-show="content_index===7">
              <h1>已完成</h1>
              <el-table :data="salesList.finish">
                <el-table-column
                  prop="sub_order_id"
                  label="子订单号"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="item_id"
                  label="商品编号"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="item_price"
                  label="商品单价"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="item_num"
                  label="购买数量"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="total_amount"
                  label="订单总价"
                  width="">
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="info" @click="getOrderDetail(scope.row.sub_order_id)">详细信息</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <el-dialog title="订单详情" :visible.sync="dialogTableVisible">
            <el-form :model="orderDetail">
              <el-form-item label="子订单号" :label-width="formLabelWidth">
                <el-input v-model="orderDetail.sub_order_id" disabled></el-input>
              </el-form-item>
              <el-form-item label="订单号" :label-width="formLabelWidth">
                <el-input v-model="orderDetail.order_id" disabled></el-input>
              </el-form-item>
              <el-form-item label="收货地址" :label-width="formLabelWidth">
                <el-input v-model="orderDetail.address" disabled></el-input>
              </el-form-item>
              <el-form-item label="商品编号" :label-width="formLabelWidth">
                <el-input v-model="orderDetail.item_id" disabled></el-input>
              </el-form-item>
              <el-form-item label="商品售价" :label-width="formLabelWidth">
                <el-input v-model="orderDetail.item_price" disabled></el-input>
              </el-form-item>
              <el-form-item label="商品数量" :label-width="formLabelWidth">
                <el-input v-model="orderDetail.item_num" disabled></el-input>
              </el-form-item>
              <el-form-item label="商品总价" :label-width="formLabelWidth">
                <el-input v-model="orderDetail.total_amount" disabled></el-input>
              </el-form-item>
              <el-form-item label="网店编号" :label-width="formLabelWidth">
                <el-input v-model="orderDetail.store_id" disabled></el-input>
              </el-form-item>
              <el-form-item label="网店名" :label-width="formLabelWidth">
                <el-input v-model="orderDetail.store_name" disabled></el-input>
              </el-form-item>
              <el-form-item label="订单状态" :label-width="formLabelWidth">
                <el-input v-model="orderDetail.state_id" disabled></el-input>
              </el-form-item>
              <el-form-item label="订单创建时间" :label-width="formLabelWidth">
                <el-input v-model="orderDetail.create_time" disabled></el-input>
              </el-form-item>
              <el-form-item label="订单付款时间" :label-width="formLabelWidth">
                <el-input v-model="orderDetail.pay_time" disabled></el-input>
              </el-form-item>
              <el-form-item label="订单发货时间" :label-width="formLabelWidth">
                <el-input v-model="orderDetail.delivery_time" disabled></el-input>
              </el-form-item>
              <el-form-item label="订单完成时间" :label-width="formLabelWidth">
                <el-input v-model="orderDetail.finish_time" disabled></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
            </div>
          </el-dialog>
        </el-main>
      </el-container>
    </el-container>
  </div>
</div>
</template>

<script>
import navbar from "../components/navbar";
import axios from "axios";
export default {
  name: "order",
  components:{navbar},
  data(){
    return{
      content_index:1,
      type_id:this.$store.state.user.type_id,

      orderList:{
        unPaid:[
          {
            sub_order_id: '1',
            item_id:'234',
            item_price:'99$',
            item_num:100,
            total_amount:9900,
          },
          {
            sub_order_id: '2',
            item_id:'234',
            item_price:'99$',
            item_num:100,
            total_amount:9900,
          },
          {
            sub_order_id: '3',
            item_id:'234',
            item_price:'99$',
            item_num:100,
            total_amount:9900,
          }
        ],
        paid:[{
          sub_order_id: '1',
          item_id:'234',
          item_price:'99$',
          item_num:100,
          total_amount:9900,
        }],
        delivery:[{
          sub_order_id: '1',
          item_id:'234',
          item_price:'99$',
          item_num:100,
          total_amount:9900,
        }],
        finished:[{
          sub_order_id: '1',
          item_id:'234',
          item_price:'99$',
          item_num:100,
          total_amount:9900,
        }],
      },
      salesList:{
        wait:[{
          sub_order_id: '1',
          item_id:'234',
          item_price:'99$',
          item_num:100,
          total_amount:9900,
        }],
        accepted:[{
          sub_order_id: '1',
          item_id:'234',
          item_price:'99$',
          item_num:100,
          total_amount:9900,
        }],
        finish:[{
          sub_order_id: '1',
          item_id:'234',
          item_price:'99$',
          item_num:100,
          total_amount:9900,
        }],
      },
      orderDetail:{
        sub_order_id:'',
        order_id:'',
        address:'',
        item_id:'',
        item_price:'',
        item_num:'',
        total_amount:'',
        store_id:'',
        store_name:'',
        state_id:'',
        create_time:'',
        pay_time:'',
        delivery_time:'',
        finish_time:'',
      },
      checkList:{
        order:{
          unpaid:[],
          paid:[],
          delivery:[],
          finished:[],
        },
        sales:{
          wait:[],
          accepted:[],
        }

      },

      dialogTableVisible:false,
      hasStore:false,
      formLabelWidth:'150px',
    }
  },
  methods:{
    /**
     * 两个查询函数
     */
    getOrderList(){
      Promise.all([
        this.$store.dispatch('order/getOrderUnpaid'),
        this.$store.dispatch('order/getOrderPaid'),
        this.$store.dispatch('order/getOrderDelivery'),
        this.$store.dispatch('order/getOrderFinished'),
      ]).then(res=>{
        [ this.orderList.unPaid,
          this.orderList.paid,
          this.orderList.delivery,
          this.orderList.finished,
        ]=res;
      }).catch(e=>{
        this.$message.error('获取购买订单列表失败！');
      })
    },
    getSalesList(){
      Promise.all([
        this.$store.dispatch('salesOrder/getOrderWait'),
        this.$store.dispatch('salesOrder/getOrderAccepted'),
        this.$store.dispatch('salesOrder/getOrderFinish'),
      ]).then(res=>{
        [ this.salesList.wait,
          this.salesList.accepted,
          this.salesList.finish,
        ]=res;
      }).catch(e=>{
        this.$message.error('获取售货订单列表失败！');
      })
    },
    /**
     * 查询订单详情
     */
    getOrderDetail(sub_order_id){
      this.$store.dispatch('order/getOrder',sub_order_id).then(res=>{
        this.orderDetail=res;
        this.dialogTableVisible=true;
      }).catch(e=>{
        this.$message.error('获取订单详情失败！');
      })
    },
    /**
     * 支付订单，批量支付订单
     */
    payOrder(sub_order_id){
      console.log(`支付订单 ${sub_order_id}`);
      this.$store.dispatch('order/payOrder',sub_order_id).then(res=>{
        Promise.all([
          this.$store.dispatch('order/getOrderUnpaid'),
          this.$store.dispatch('order/getOrderPaid'),
        ]).then(res=>{
          [ this.orderList.unPaid,
            this.orderList.paid,
          ]=res;
          this.$message.success('支付成功！');
        })
      }).catch(e=>{
        this.$message.error('支付失败！');
      })
    },
    payOrders(){
      console.log(`支付订单 ${this.checkList.order.unpaid}`);
      this.$store.dispatch('order/payOrder',this.checkList.order.unpaid).then(res=>{
        Promise.all([
          this.$store.dispatch('order/getOrderUnpaid'),
          this.$store.dispatch('order/getOrderPaid'),
        ]).then(res=>{
          [ this.orderList.unPaid,
            this.orderList.paid,
          ]=res;
          this.$message.success('支付成功！');
        })
      }).catch(e=>{
        this.$message.error('支付失败！');
      })
    },
    /**
     * 关闭订单，批量关闭订单
     */
    closeOrder(sub_order_id){
      this.$store.dispatch('order/closeOrder',sub_order_id).then(res=>{
        this.$message.success('关闭订单成功！');
        this.getOrderList();
      }).catch(e=>{
        this.$message.error('关闭订单失败！');
      })
    },
    closeOrders(list){
      console.log(`关闭订单 ${list}`);
      this.$store.dispatch('order/closeOrder',list).then(res=>{
        this.$message.success('关闭订单成功！');
        this.getOrderList();
      }).catch(e=>{
        this.$message.error('关闭订单失败！');
      })
    },
    /**
     * 收货，批量收货
     */
    deliverOrder(sub_order_id){
      console.log(`报告收货 ${sub_order_id}`);
      this.$store.dispatch('order/deliverOrder',[sub_order_id]).then(res=>{
        Promise.all([
          this.$store.dispatch('order/getOrderDelivery'),
          this.$store.dispatch('order/getOrderFinished'),
        ]).then(res=>{
          [ this.orderList.delivery,
            this.orderList.finished,
          ]=res;
          this.$message.success('报告收货成功！');
        })
      }).catch(e=>{
        this.$message.error('报告收货失败！');
      })
    },
    deliverOrders(){
      console.log(`报告收货 ${this.checkList.order.delivery}`);
      this.$store.dispatch('order/deliverOrder',this.checkList.order.delivery).then(res=>{
        Promise.all([
          this.$store.dispatch('order/getOrderDelivery'),
          this.$store.dispatch('order/getOrderFinished'),
        ]).then(res=>{
          [ this.orderList.delivery,
            this.orderList.finished,
          ]=res;
          this.$message.success('报告收货成功！');
        })
      }).catch(e=>{
        this.$message.error('报告收货失败！');
      })
    },
    /**
     * 接单
     */
    acceptOrder(obj){
      this.$store.dispatch('salesOrder/acceptOrder',
        {
          sub_order_id:obj.sub_order_id,
          item_id:obj.item_id,
          item_num:obj.item_num,
        }).then(res=>{
        Promise.all([
          this.$store.dispatch('salesOrder/getOrderWait'),
          this.$store.dispatch('salesOrder/getOrderAccepted'),
        ]).then(res=>{
          [ this.salesList.wait,
            this.salesList.accepted
          ]=res;
          this.$message.success('接单成功！');
        })
      }).catch(e=>{
        this.$message.error('接单失败！');
      })
    },
    /**
     * 拒单，批量拒单
     */
    refuseOrder(sub_order_id){
      this.$store.dispatch('salesOrder/refuseOrder',
        [sub_order_id]
      ).then(res=>{
        new Promise(resolve => {
          setTimeout(()=>{
            this.getSalesList();
            resolve();
          },500)
        }).then(res=>{
          this.$message.success('拒单成功！')
        })
      }).catch(e=>{
        this.$message.error('拒单失败！')
      })
    },
    refuseOrders(list){
      this.$store.dispatch('salesOrder/refuseOrder',
        list
      ).then(res=>{
        new Promise(resolve => {
          setTimeout(()=>{
            this.getSalesList();
            resolve();
          },500)
        }).then(res=>{
          this.$message.success('拒单成功！')
        })
      }).catch(e=>{
        this.$message.error('拒单失败！')
      })
    },
    /**
     * 发货
     */
    deleverGood(sub_order_id){
      this.$store.dispatch('salesOrder/deliver',sub_order_id).then(res=>{
        this.$message.success('发货成功！');
        this.getSalesList();
      }).catch(e=>{
        this.$message.error('发货失败！')
      })
    },
    /**
     * 更新库存
     */
    modifyNum(item_id){
      this.$prompt('更新库存', '订单管理', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /[1-9]\d*/,
        inputErrorMessage: '请输入数字'
      }).then(({ value }) => {
        this.$store.dispatch('salesOrder/modifyNum',{
          item_id:item_id,
          item_num:value,
        }).then(res=>{
          this.$message.success('更新库存成功！');
        }).catch(e=>{
          this.$message.error('更新库存失败！');
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    }
  },
  created() {
    if (this.type_id!==1){  //供货商1没有购买订单
      this.getOrderList();
    }
    if (this.type_id!==3){  //顾客3没有销售订单
      this.$store.dispatch('manage/getStore').then(()=>{
        this.hasStore=true;
        this.getSalesList();
      })
    }
  }
}
</script>

<style scoped>
  .footer{
    margin-top: 50px;
    display: flex;
    justify-content: flex-end;
    padding-right: 200px;
  }
</style>
